class Enlarge
{
    constructor(el,nb={}){
        this.el=document.querySelector(el)
        this.imgObj=this.el.querySelector('.img')
        this.maskObj=this.el.querySelector('.mask')
        this.enlargeObj=this.el.querySelector('.enlarge')
        this.img1=this.el.querySelector('.img1')
        this.img2=this.el.querySelector('.img2')
        this.btn=this.el.querySelector('button')
        this.nb=nb
        this.maskObj.style.background=this.nb.maskbg
        

        this.init()
    }
    init(){
        this.overout()
        this.maskmove()
        this.masknb()
        this.tbenlarge()
        this.clickone()
        this.clicktwo()
    }
    clickone(){
        this.img1.onclick=()=>{
            this.imgObj.style.backgroundImage='url(./imgs/1.jpg)'
            this.enlargeObj.style.backgroundImage='url(./imgs/1.big.jpg)'
            this.img2.parentNode.className=''
            this.img1.parentNode.className='active'
        }
    }
    clicktwo(){
        this.img2.onclick=()=>{
            this.imgObj.style.backgroundImage=`url(./imgs/2.jpg)`
            this.enlargeObj.style.backgroundImage=`url(./imgs/2.big.jpg)`
            this.img1.parentNode.className=''
            this.img2.parentNode.className='active'
        }
    }


    getstyle(a,b){
        if(window.getComputedStyle){
            return window.getComputedStyle(a)[b]
        }else{
            return a.currentStyle[b]
        }
    }
    maskmove(){
        // 鼠标移动放大
        this.imgObj.onmousemove=(evt)=>{
            let e=evt||window.event
            let left=e.pageX-this.imgObj.parentNode.offsetLeft-this.maskObj.offsetWidth/2
            let top=e.pageY-this.imgObj.parentNode.offsetTop-this.maskObj.offsetHeight/2
            let maxleft=this.imgObj.clientWidth-this.maskObj.offsetWidth
            let maxtop=this.imgObj.clientHeight-this.maskObj.offsetHeight
            if(left<0)       left=0
            if(left>maxleft) left=maxleft
            if(top<0)        top=0
            if(top>maxtop)   top=maxtop
            this.maskObj.style.left=left+'px'
            this.maskObj.style.top=top+'px'
            this.tbenlarge(left,top)
            //计算比例
            //可显示区域=小窗口*（大图片/小图片）
            //enlarge的大小=mask的大小*（img/背景图）
            //this.enlargeobj
        }
    }
    tbenlarge(left,top){
        // 放大镜的大小
        let enlargew=parseFloat(this.getstyle(this.enlargeObj,'width'))
        let enlargeh=parseFloat(this.getstyle(this.enlargeObj,'height'))
        let maskW=parseInt(this.getstyle(this.maskObj,'width'))
        let maskH=parseInt(this.getstyle(this.maskObj,'height'))
        // console.log(enlargew,enlargeh);
        let x=(enlargew/maskW)*left
        let y=(enlargeh/maskH)*top
        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }





    masknb(){
        //计算mask多大
        let maskW=parseInt(this.getstyle(this.maskObj,'width'))
        let maskH=parseInt(this.getstyle(this.maskObj,'height'))
        let imgobjw=this.getstyle(this.imgObj,'width')
        let imgobjh=this.getstyle(this.imgObj,'height')
        let enlarge=this.getstyle(this.enlargeObj,'background-size')
        let enlargebgW=parseInt(enlarge.split(' ')[0])
        let enlargebgH=parseInt(enlarge.split(' ')[1])
        let enlargew=maskW*(enlargebgW/parseInt(imgobjw))
        let enlargeh=maskH*(enlargebgH/parseInt(imgobjh))
        this.enlargeObj.style.width=enlargew+'px'
        this.enlargeObj.style.height=enlargeh+'px'
        // console.log(maskW,imgobj1)
    }
 



    overout(){
        //移入移出
        this.imgObj.onmouseover=()=>{
            this.maskObj.style.display=this.enlargeObj.style.display='block'
            this.btn.innerText=this.nb.key

        }
        this.imgObj.onmouseout=()=>{
            this.maskObj.style.display=this.enlargeObj.style.display='none'
            this.btn.innerText='余其权是变态'


        }
    }


}






























// class Enlarge
// {
//     constructor(el)
//     {
//         // 1. 保存全局信息
//         this.el = document.querySelector(el)
//         this.imgObj = this.el.querySelector('.img')
//         this.maskObj = this.el.querySelector('.mask')
//         this.enlargeObj = this.el.querySelector('.enlarge')
        
//         // 2. 默认调用
//         this.init()
//     }
    
//     init() {
//         this.overOut()
//         this.enlargeSetWH()
//         this.maskMove()
//         // this.enlargeSetBg()
//         // this.smallImgChange()
//     }

//     enlargeSetBg(left, top)
//     {
//         // div.enlarge bc left =    (div.enlarge w / div.mask w) *  div.mask left
//         let enlargeW = parseFloat(this.getStyle(this.enlargeObj, 'width'))
//         let enlargeH = parseFloat(this.getStyle(this.enlargeObj, 'height'))
//         // console.log(enlargeW, enlargeH);
        
//         let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
//         let maskH = parseInt(this.getStyle(this.maskObj, 'height'))

//         let x = (enlargeW/maskW) * left
//         let y = (enlargeH/maskH) * top

//         this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
//     }

//     maskMove() 
//     {
//         // this enlarge1 / enlarge2
//         // 步骤1：给img盒模型绑定鼠标移动事件
//         // this.imgObj.onmousemove = function(evt) { // this this.imgObj
//         this.imgObj.onmousemove = (evt) => { // this enlarge1 / enlarge2
//             // 步骤2；事件处理函数中
//             // 2.1 同步mask遮罩框的left和top - 获取事件对象
//             let e = evt || window.event
//             // 2.2 同步mask遮罩框的left和top - 计算left和top  公式鼠标的pageX - imgObj.offsetLeft  居中
//             let left = e.pageX - this.imgObj.parentNode.offsetLeft - this.maskObj.offsetWidth/2
//             let top = e.pageY - this.imgObj.parentNode.offsetTop - this.maskObj.offsetHeight/2

//             // 2.3 同步mask遮罩框的left和top - 范围判断
//             if (left<0) left = 0
//             if (top<0) top = 0
//             let maxLeft = this.imgObj.offsetWidth - this.maskObj.offsetWidth
//             let maxTop = this.imgObj.offsetHeight - this.maskObj.offsetHeight
//             if (left>maxLeft) left = maxLeft
//             if (top>maxTop) top = maxTop
//             // 2.4 同步mask遮罩框的left和top - 设置left和top
//             this.maskObj.style.left = left + 'px'
//             this.maskObj.style.top = top + 'px'

//             // 同步背景移动
//             this.enlargeSetBg(left, top)
//         }
//     }

//     getStyle(tagObj, attrName) 
//     {
//         if (window.getComputedStyle)
//         {
//             // return window.getComputedStyle(tagObj).attrName
//             return window.getComputedStyle(tagObj)[attrName]
//         } else {
//             // return tagObj.currentStyle.attrName
//             return tagObj.currentStyle[attrNamea]  // 当对象的键是变量时，使用数组语法
//         }
//     }

//     enlargeSetWH()
//     {
//         // div.enlarge w = div.mask w * (div.enlarge background / div.img background )
//         // div.enlarge h = div.mask h * (div.enlarge background / div.img background )

//         let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
//         let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
//         // 留心：offsetWidth、offsetHeight不能获取隐藏元素

//         let enlarge = this.getStyle(this.enlargeObj, 'background-size')
//         let enlargeW = parseInt( enlarge.split(' ')[0])
//         let enlargeH = parseInt( enlarge.split(' ')[1])

//         let imgW = this.imgObj.clientWidth
//         let imgH = this.imgObj.clientWidth

//         this.enlargeObj.style.width = maskW * (enlargeW / imgW) + 'px'
//         this.enlargeObj.style.height = maskH * (enlargeH / imgH)  + 'px'
//     }

//     overOut()
//     {
//         // 左侧图移入
//         // 事件处理函数中-遮罩框显示
//         // 事件处理函数中-放大镜显示
//         // this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
//         this.imgObj.onmouseover = function(){
//             this.maskObj.style.display = this.enlargeObj.style.display = 'block'
//         }
//         this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
//     }
// }